<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数化组件</title>
</head>
<body>
<div id="app">
    <smart-item :data="data"></smart-item>
    <button type="button" @click="change('img')">切换为图片组件</button>
    <button type="button" @click="change('video')">切换为视频组件</button>
    <button type="button" @click="change('text')">切换为文本组件</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    //图片组选项
    var ImageItem = {
        props: ['data'],
        render: function (createElement) {
            return createElement('div',[
                createElement('p','图片组件'),
                createElement('img',{
                    attrs: {
                        src: this.data.url
                    }
                })
            ])
        }
    };
    //视频组件选项
    var VideoItem = {
        props: ['data'],
        render: function (createElement) {
            return createElement('div',[
                createElement('p','视频组件'),
                createElement('video',{
                    attrs: {
                        src: this.data.url,
                        controls: 'controls',
                        autoplay: 'autoplay'
                    }
                })
            ])
        }
    };
    //纯文本组件选项
    var TextItem = {
        props:['data'],
        render: function (createElement) {
            return createElement('div',[
                createElement('p','纯文本组件'),
                createElement('p',this.data.text)
            ])
        }
    };
    Vue.component('SmartItem',{
        //函数化组件
        functional: true,
        render: function (createElement,context) {
            //根据传入的数据，智能判断显示哪种组件
            function getComponent() {
                var data = context.props.data;
                //判断prop:data的type字段是属于哪种类型的组件
                if(data.type ==='img') return ImageItem;
                if(data.type === 'video') return VideoItem;
                return TextItem;
            }
            return createElement(
                getComponent(),
                {
                    props: {
                        //把smart-item的prop:data传给上面智能选择的组件
                        data: context.props.data
                    }
                },
                context.children
            )
        },
        props: {  //父传子，数据验证对象写法
            data: {
                type: Object,
                required: true
            }
        }
    });
    var app = new Vue({
        el: "#app",
        data: {
            data: {}
        },
        methods: {
            //切换不同类型组件的数据
            change: function (type) {
                if(type ==='img'){
                    this.data = {
                        type: 'img',
                        url: "http://envyzhan.club/img/avatar.jpg"
                    }
                }else if(type === 'video'){
                    this.data = {
                        type: 'video',
                        url: 'http://vjs.zencdn.net/v/oceans.mp4'
                    }
                }else if(type === 'text'){
                    this.data = {
                        type: 'text',
                        text: '这是一段纯文本内容'
                    }
                }
            }
        },
        created: function () {
            //初始化的时候默认设置图片组件的数据（也就是默认选中图片组件）
            this.change('img');
        }
    })
</script>
</body>
</html>
